<div>
  <div class="source-url-section">
    <table class="source-table" cellspacing="0">
      <tbody>
        <tr>
          <td class="first">
            <span class="source-label">${nls.locatorUrl}</span>
          </td>
          <td class="second">
            <div data-dojo-attach-point="locatorUrl" data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required:true,trim:true,disabled:true,style:{width:'100%'}"></div>
          </td>
          <td class="third">
            <span title="${nls.set}" class="jimu-btn" data-dojo-attach-event="click:_onSetLocatorUrlClick">${nls.set}</span>
          </td>
        </tr>
        <tr>
          <td class="first"></td>
          <td class="second">
            <span data-dojo-attach-point="messageNode" class="tip"></span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="source-details-section" data-dojo-attach-point="detailsSection">
    <table class="source-table" cellspacing="0">
      <tbody>
        <tr>
          <td class="first">${nls.locatorName}</td>
          <td class="second">
            <input type="text" data-dojo-type="dijit/form/ValidationTextBox" data-dojo-attach-point="locatorName" data-dojo-attach-event="Blur: _onLocatorNameBlur"
            placeHolder="${nls.locatorName}"
            required="true" data-dojo-props='style:{width:"100%"}'/>
          </td>
        </tr>
        <tr>
          <td class="first">${nls.placeholder}</td>
          <td class="second">
            <input type="text" data-dojo-type="dijit/form/TextBox" data-dojo-attach-point="placeholder"
            data-dojo-attach-event="Blur: _onPlaceholderBlur"
            placeHolder="${nls.placeholder}" data-dojo-props='style:{width:"100%"}'/>
          </td>
        </tr>
        <tr class="hide-country-code-row country-code-row" data-dojo-attach-point="countryCodeRow">
          <td class="first">${nls.countryCode}</td>
          <td class="second">
            <input type="text" data-dojo-type="dijit/form/TextBox" data-dojo-attach-point="countryCode"
            data-dojo-attach-event="Blur:_onCountryCodeBlur"
            placeHolder="${nls.countryCodeEg} USA,CHN" data-dojo-props='style:{width:"97%"}'/>
            <a class="jimu-float-trailing" target="_blank" href="https://developers.arcgis.com/rest/geocode/api-reference/geocode-coverage.htm" style="line-height:30px;">?</a>
            <span class="example">${nls.countryCodeHint}</span>
          </td>
        </tr>
        <tr>
          <td class="first">
            <span class="source-label">${nls.maxSuggestions}</span>
          </td>
          <td class="second">
            <div class="source-tips" title="${nls.locatorTips}" data-dojo-attach-point="tipsNode">
              ${nls.locatorTips}
            </div>
            <div data-dojo-attach-point="maxSuggestions" data-dojo-type="dijit/form/NumberTextBox" data-dojo-props="constraints:{min:1,places:0},style:{width:'100%'},value:6"></div>
          </td>
        </tr>
        <tr>
          <td class="first">
            <span class="source-label">${nls.maxResults}</span>
          </td>
          <td class="second">
            <div data-dojo-attach-point="maxResults" data-dojo-type="dijit/form/NumberTextBox" data-dojo-props="constraints:{min:1,places:0},style:{width:'100%'},value:6"></div>
          </td>
        </tr>
        <tr>
          <td class="first">
            <span class="source-label">${nls.zoomScale}</span>
          </td>
          <td class="second">
            <span class="jimu-float-leading" style="line-height:30px;">1: </span>
            <div class="jimu-float-trailing" data-dojo-attach-point="zoomScale" data-dojo-type="dijit/form/NumberTextBox" data-dojo-props="constraints:{min:1},style:{width:'96%'},value:50000"></div>
          </td>
        </tr>
        <tr>
          <td class="first" colspan="2">
            <span class="source-label" data-dojo-attach-point="enableLocalSearch"></span>
          </td>
        </tr>
        <tr data-dojo-attach-point="minScaleNode" class="local-search-row">
          <td class="first">
            <span class="source-label">${nls.minScale}</span>
          </td>
          <td class="second">
            <span class="jimu-float-leading" style="line-height:30px;">1: </span>
            <div class="jimu-float-trailing" data-dojo-attach-point="localSearchMinScale" data-dojo-type="dijit/form/NumberTextBox" data-dojo-props="constraints:{min:1},style:{width:'96%'},value:300000"></div>
            <span class="example" title="${nls.minScaleHint}">${nls.minScaleHint}</span>
          </td>
        </tr>
        <tr data-dojo-attach-point="radiusNode" class="local-search-row">
          <td class="first">
            <span class="source-label">${nls.radius}</span>
          </td>
          <td class="second">
            <div class="jimu-float-leading" style="width:100%;">
              <div class="jimu-float-leading" data-dojo-attach-point="localSearchDistance" data-dojo-type="dijit/form/NumberTextBox" data-dojo-props="constraints:{min:1},style:{width:'75%'},value:50000"></div>
              <span class="jimu-float-trailing" style="line-height:30px;">${nls.meters}</span>
            </div>
            <span class="example" data-dojo-attach-point="radiusHintNode" title="${nls.radiusHint}">${nls.radiusHint}</span>
          </td>
        </tr>
      </tbody>
    </table>
    <table class="source-table" cellspacing="0">
      <tbody>
        <tr>
          <td class="first">
            <div data-dojo-attach-point="searchInCurrentMapExtent"></div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div data-dojo-attach-point="shelter" data-dojo-type="jimu/dijit/LoadingShelter" data-dojo-props="hidden:true"></div>
</div>